<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Ken Pu</title>
    <link rel="stylesheet" type="text/css" href="/common/style.css"/>
    <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css">
  <link rel="stylesheet"
        href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" type="text/css" media="all" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
    <script>
      $(function() {
        $("#after").hide();
        setTimeout(function() {
          $.ajax({
            url: '/live/{{name}}',
            data: {load:1},
            success: function(data) {
              $("#before").hide();
              $("#after").show();
            }, 
            error: function(xhr, status, error) {
              var p = $("<p>").html("Error:" + error);
              $("#before").append(p);
            }
          });
        }, 500);
      });
    </script>
  </head>

  <body>
    <div class="container" style="margin-top:50px;">
      <div class="alert-message warning">
        <div id="before">
          <a class="close" href="#">
            <img src="/common/ajax-loader.gif"></img>
          </a>
          <p>
            <strong>Data for <i>{{name}}</i>
            is being loaded from Google Spreadsheet.</strong>
            Please be patient while your pages are being regenerated.
          </p>
        </div>
        <div id="after">
          <p>Success.  You can now see your 
            <a href="/page/{{name}}">public page</a> and
            your <a href="/activity-report/{{name}}">activity report</a>.
          </p>
        </div>
      </div>
    </div>
  </body>
</html>
